<template>
  <div style="margin: 20px 0px">
    <!-- <el-button @click="Switch" type="text" class="fanhui">
      &lt;&lt;点击返回</el-button
    > -->
    <div class="title">
      标题名：<input type="text" placeholder="请输入标题" v-model="title" />
      发布人：<input type="text" placeholder="请输入名称" v-model="author" />
      论文类型：
      <el-select
        v-model="category"
        placeholder="请选择类型"
        style="border-color: #409eff"
      >
        <el-option
          v-for="item in data"
          :key="item.cid"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-upload" @click="aa"
        >发布</el-button
      >
    </div>
    <!-- 富文本编辑器组件 -->
    <div class="box">
      <el-card style="height: 90vh">
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          style="height: 80vh"
          :options="editorOption"
        >
        </quill-editor>
      </el-card>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  name: "FuncFormsEdit",
  components: {
    quillEditor,
  },
  data() {
    return {
      data: "",
      content: null,
      editorOption: {},
      title: "", // 标题
      author: "", // 名称
      category: "", // 类型
    };
  },
  mounted() {
    this.cs();
  },
  methods: {
    cs() {
      this.$http.get("/category/").then((res) => {
        this.data = res.data;
      });
    },
    // if(Object.keys(title).length==0){
    //   alert("标题不能为空")
    // }
    added() {
      this.$http
        .post("/paper/add", {
          title: this.title,
          content: this.content,
          author: this.author,
          category: this.category,
        })
        .then((res) => {
          console.log(res);
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          });
        });
    },
    aa() {
      if (this.title.length == 0) {
        this.$notify({
          title: "警告",
          message: "标题不能为空！",
          type: "warning",
        });
      } else if (this.author.length == 0) {
        this.$notify({
          title: "警告",
          message: "发布人不能为空！",
          type: "warning",
        });
      } else if (this.category.length == 0) {
        this.$notify({
          title: "警告",
          message: "论文类型不能为空！",
          type: "warning",
        });
      } else if (this.content.length == 0) {
        this.$notify({
          title: "警告",
          message: "论文内容不能为空！",
          type: "warning",
        });
      } else {
        // console.log("成功");
        this.added();
        this.$router.push({ name: "Home" });
      }
    },
    Switch() {
      // this.$router.go(-1)
      this.$router.push({ path: "/" });
    },
  },
};
</script>
<style lang="less">
.title {
  width: 1200px;
  height: 50px;
  margin: 0 auto;
  font-weight: bold;
  font-size: 20px;
  line-height: 50px;
}
.title > input {
  height: 40px;
  font-weight: bold;
  font-size: 20px;
  border: 0px;
  outline: none;
}
.box {
  width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
  // border: 1px solid #ff0000;
}
.el-button [class*="el-icon-"] + span {
  font-weight: bold;
}
.fanhui {
  margin-left: 60px;
  margin-top: 3px;
  // border: 1px solid #ff0000;
  float: left;
  font-size: 17px;
}
.el-input__inner {
  border-color: #46a1ff;
}
</style>